<template>
  <div>
    <!-- <header class="mui-bar mui-bar-nav mui-bar-transparent">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选择出行人员</h1>
			<a id='done' class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled">完成</a>
		</header>	 -->
    <yd-navbar title="选择出行人员">
        <router-link to="#" slot="left">
            <yd-navbar-back-icon></yd-navbar-back-icon>
        </router-link>
    </yd-navbar>
		
		<div class="">
			<div id='list' class="mui-indexed-list">
				 <ul class="mui-table-view mui-table-view-chevron" id='setting-box'>
						<li class="mui-table-view-cell">
							<a href="javascript:;" title="添加朋友" id="adduser"><i class="mui-icon mui-icon-contact lyx_icon"></i>添加人员</a>
						</li>
				</ul>
        <yd-cell-item>
          <div>
            <hd-svg-icon name="hd-renwu" size="30px" color="#FFA500"></hd-svg-icon>
          </div>
          <span slot="left">添加人员</span>
        </yd-cell-item>
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索人员">
				</div>
				
				
				
				<div class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
					<a>#</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view" id='friend_list'>
					</ul>
				</div>
			</div>
		</div>
  </div>
</template>

<script>

export default {
  name: 'myFriend',
  data() {
    return {
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
    },
    adduser() {
      alert('aaa');
    }
  }
}
</script>

<style scoped>
body {
	height: 100%;
	overflow: hidden;
}

.mui-bar {
	-webkit-box-shadow: none;
	box-shadow: none;
}

#done.mui-disabled {
	color: gray;
}

.hd-header {
	background-color: #099fde;
}

.over-btn {
	line-height: 40px;
	text-align: center;
}

.hd-header .mui-title {
	color: white;
}

.hd-white {
	color: white;
}
</style>